<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>趋势概况</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=1.0, user-scalable=yes, user-scalable=0, minimal-ui">
    <link rel="stylesheet" type="text/css" href="../../../js/layer/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../../../css/admin.css">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="refresh" content="300">
    <script type="text/javascript" src="../../../js/echarts.js"></script>
    <script type="text/javascript" src="../../../js/layer/layui.js"></script>
</head>
<body>

<div class="container-fluid-table" id="view">

    <div class="row">

        <div class="col-lg-12">
            <div class="card">
                <header class="card-header">
                    <div class="card-title" style="float: left; line-height: 2.4em;">趋势概况</div>
                    <div class="card-search" style="display: none">
                    </div>
                </header>


                <div class="layui-tab layui-tab-brief" lay-filter="test-hash" >
                    <ul class="layui-tab-title" id="apps"  style="padding-left:0px;">
                        {{#  arr_foreach(d.tabs, function(k1, v1){ }}
                        {{#  if(k1 == 1){ }}
                        <li class="layui-this" onclick="tabsLink1(this)" data-where='{{v1.where}}'>{{v1.title}}</li>
                        {{#  }else if(k1 == 0){ }}
                        {{# }else{ }}
                        <li  onclick="tabsLink1(this)" data-where='{{v1.where}}'>{{v1.title}}</li>
                        {{#  } }}
                        {{#  }); }}
                    </ul>
                </div>


                <div class="layui-card1">

                    <div class="layui-tab" id="page-tab" lay-filter="test-hash" >
                        <ul class="layui-tab-title"  style="padding-left:0px;" id="date-option">
<!--                            <li class="layui-this" onclick="onchangedate(this)" data-date="昨日">昨日</li>-->
                            <li class="layui-this" onclick="onchangedate(this)" data-date="最近3天">最近3天</li>
                            <li onclick="onchangedate(this)" data-date="最近7天">最近7天</li>
                            <li onclick="onchangedate(this)" data-date="最近15天">最近15天</li>
                            <li onclick="onchangedate(this)" data-date="最近30天">最近30天</li>
                            <li onclick="onchangedate(this)" data-date="最近60天">最近60天</li>
                            <li onclick="onchangedate(this)" data-date="最近90天">最近90天</li>
                            <li>
                                <div class="layui-input-group">
                                    <input type="text" placeholder="自定义时间范围" onchange="onchangedateVal(this)" style="border: none; height: 34px;" class="layui-input" id="ID-laydate-shortcut-range-date">
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="layui-tab-content" style="padding:0px 10px; margin-top: 50px;" id="trend-container">
                    </div>

                </div>


            </div>
        </div>

    </div>

</div>

<script>


    // 使用刚指定的配置项和数据显示图表。
    function getYesterdayDate(beforeDay){
        var today = new Date();  // 获取当前日期
        var yesterday = new Date(today);  // 创建一个新的Date对象，将其设置为当前日期
        yesterday.setDate(today.getDate() + parseInt(beforeDay));  // 将日期减去1天
        var yesterdayDate = yesterday.toISOString().split("T")[0];  // 转换为ISO 8601格式 yyyy-mm-dd
        console.log(yesterdayDate);
        return yesterdayDate;
    }

    function tabsLink1(obj){
        $("#date-option").find("li").eq(0).click();
    }

    ready(function() {
        layui.use(['zhanshop'], function () {
            var laydate = layui.laydate;
            var zhanshop = layui.zhanshop;


            zhanshop.view(API_ADDRESS + apiUrlTable +"/Visitdevice", '#view', function(){
                laydate.render({
                    elem: "#ID-laydate-shortcut-range-date",
                    range: true,
                    done: function(value, startDate, endDate){
                        ajaxTrend(value);
                    }
                });
                var beforeDay1 = getYesterdayDate(-3);
                var beforeDay2 = getYesterdayDate(-1);
                ajaxTrend(beforeDay1+' - '+beforeDay2);
            }, 'POST', {"_method":"render"});


            window.ajaxTrend = function (date) {
                var where = $("#apps").find(".layui-this").data("where");
                var app = where.split(",")[2];

                zhanshop.ajax(API_ADDRESS + apiUrlTable +"/Visitdevice", "POST", {"app": app, "dateof": date, "_method":"trend"}, {}, function(res){
                    $("#trend-container").html("");
                    for(var i in res.data){
                        var echartsOption = res.data[i];
                        // 创建一个新的div元素
                        var newDiv = document.createElement("div");
                        // 设置div的ID
                        newDiv.id = "echarts-trend-"+i;
                        // 设置div的宽度和高度
                        newDiv.style.width = "100%";
                        newDiv.style.height = "600px";
                        document.getElementById("trend-container").append(newDiv);
                        var trendContainer = echarts.init(document.getElementById("echarts-trend-"+i));
                        trendContainer.setOption(echartsOption);
                    }
                }, function(xhr){
                    zhanshop.alert('页面渲染失败:'+(xhr.responseJSON[apiMsg] ? xhr.responseJSON[apiMsg] : xhr.statusText), 'danger', function(){
                        window.location.reload();
                    });
                });

            }

            window.onchangedate = function (obj){
                /**
                 * <li class="layui-this" onclick="onchangedate(this)" data-date="昨日">昨日</li>
                 *                             <li onclick="onchangedate(this)" data-date="最近3天">最近3天</li>
                 *                             <li onclick="onchangedate(this)" data-date="最近7天">最近7天</li>
                 *                             <li onclick="onchangedate(this)" data-date="最近15天">最近15天</li>
                 *                             <li onclick="onchangedate(this)" data-date="最近30天">最近30天</li>
                 *                             <li onclick="onchangedate(this)" data-date="最近60天">最近60天</li>
                 *                             <li onclick="onchangedate(this)" data-date="最近90天">最近90天</li>
                 */
                switch ($(obj).html()) {
                    case "昨日":
                        var beforeDay = getYesterdayDate(-1);
                        ajaxTrend(beforeDay+' - '+beforeDay);
                        break;
                    case "最近3天":
                        var beforeDay1 = getYesterdayDate(-3);
                        var beforeDay2 = getYesterdayDate(-1);
                        ajaxTrend(beforeDay1+' - '+beforeDay2);
                        break;
                    case "最近7天":
                        var beforeDay1 = getYesterdayDate(-7);
                        var beforeDay2 = getYesterdayDate(-1);
                        ajaxTrend(beforeDay1+' - '+beforeDay2);
                        break;
                    case "最近15天":
                        var beforeDay1 = getYesterdayDate(-15);
                        var beforeDay2 = getYesterdayDate(-1);
                        ajaxTrend(beforeDay1+' - '+beforeDay2);
                        break;
                    case "最近30天":
                        var beforeDay1 = getYesterdayDate(-15);
                        var beforeDay2 = getYesterdayDate(-1);
                        ajaxTrend(beforeDay1+' - '+beforeDay2);
                        break;
                    case "最近60天":
                        var beforeDay1 = getYesterdayDate(-60);
                        var beforeDay2 = getYesterdayDate(-1);
                        ajaxTrend(beforeDay1+' - '+beforeDay2);
                        break;
                    case "最近90天":
                        var beforeDay1 = getYesterdayDate(-90);
                        var beforeDay2 = getYesterdayDate(-1);
                        ajaxTrend(beforeDay1+' - '+beforeDay2);
                        break;
                }
            }

        });
    });

</script>
</body>
</html>